<template>
  <div>
    <div class="login_top" style=" border-bottom: 1px solid #eee;">
      <div class="login_body">
        <div>
          <img src="../../assets/img/login_logo.png" alt style="width: 180px" />
          <span style="font-size:38px">注册</span>
        </div>
        <div class="kefu">
          <span style="font-size: 25px;">我已经注册,现在去登录</span>
          <router-link to="/login">
            <span class="dl">登录</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="register">
      <div id="J-regist" class="container mt40 mb40 container-regist">
        <div class="bd1 place14" style="display:flex">
          <div class="clearfix mt40 mb40">
            <ul class="g-registBox fl">
              <li
                class="clli"
                :class="{'form-group--error': $v.params.phone.$error, 'active': params.phone}"
              >
                <div class="mod">
                  <i class="i-star">*</i>
                  <img class="eicon" src="../../assets/img/sj_icon.png" alt />
                  <input
                    type="text"
                    name="login_name"
                    v-model="params.phone"
                    @input="setPhone($event.target.value)"
                    class="bor-itxt wrong-itxt"
                    placeholder="请输入您的手机号码"
                  />
                  <div v-if="!$v.params.phone.required" class="input-pt input-pt-w">
                    <span>手机号不能为空</span>
                    <i class="ico">&nbsp;</i>
                  </div>
                  <div v-if="!$v.params.phone.phone" class="input-pt input-pt-w">
                    <span>手机号格式不正确</span>
                  </div>
                </div>
              </li>
              <li
                class="clli"
                :class="{'form-group--error': $v.params.verification_code.$error, 'active': params.verification_code}"
              >
                <div class="mod">
                  <i class="i-star">*</i>
                  <img class="eicon" src="../../assets/img/yzm_icon.png" alt />
                  <input
                    type="text"
                    v-model="params.verification_code"
                    @input="setVerificationCode($event.target.value)"
                    class="bor-itxt wrong-itxt"
                    placeholder="请输入您的收到的验证码"
                  />
                  <input
                    v-show="show"
                    id="J-btnGetCode"
                    class="btn-getCode"
                    type="button"
                    sdata="60"
                    @click="getPhoneCode"
                    value="免费获取验证码"
                  />
                  <input
                    v-show="!show"
                    id="J-btnGetCode"
                    class="btn-getCode"
                    type="button"
                    sdata="60"
                    :value="count+'s'"
                  />
                  <div v-if="!$v.params.verification_code.required" class="input-pt input-pt-w">
                    <span>验证码不能为空</span>
                    <i class="ico">&nbsp;</i>
                  </div>
                </div>
              </li>
              <li
                class="clli"
                :class="{'form-group--error': $v.params.password.$error, 'active': params.password}"
              >
                <div class="mod">
                  <i class="i-star">*</i>
                  <img class="eicon" src="../../assets/img/mm_icon.png" alt />
                  <input
                    name="login_password"
                    v-model="params.password"
                    @input="setPassword($event.target.value)"
                    type="password"
                    class="bor-itxt itxt-ok"
                    placeholder="请输入您的密码"
                  />
                  <div v-if="!$v.params.password.required" class="input-pt input-pt-w">
                    <span>密码不能为空</span>
                    <i class="ico">&nbsp;</i>
                  </div>
                  <div v-if="!$v.params.password.minLength" class="input-pt input-pt-w">
                    <span>密码长度不小于6位</span>
                    <i class="ico">&nbsp;</i>
                  </div>
                  <div v-if="!$v.params.password.maxLength" class="input-pt input-pt-w">
                    <span>密码长度不大于32位</span>
                    <i class="ico">&nbsp;</i>
                  </div>
                </div>
              </li>
              <li
                class="clli"
                :class="{'form-group--error': $v.params.confirmPassword.$error, 'active': params.confirmPassword}"
              >
                <!-- <div class="mod">
                <i class="i-star">*</i>
                <i class="icon i-psw"></i>
                <input
                  type="password"
                  name="psw_confirm"
                  v-model="params.confirmPassword"
                  @input="setConfirmPassword($event.target.value)"
                  class="bor-itxt wrong-itxt"
                  placeholder="请重复您的密码"
                />
                <div v-if="!$v.params.confirmPassword.required" class="input-pt input-pt-w">
                  <span>重复密码不能为空</span>
                  <i class="ico">&nbsp;</i>
                </div>
                <div v-if="!$v.params.confirmPassword.sameAsPassword" class="input-pt input-pt-w">
                  <span>密码不一致</span>
                  <i class="ico">&nbsp;</i>
                </div>
                </div>-->
              </li>
              <li
                class="clli"
                :class="{'form-group--error': $v.params.confirmPassword.$error, 'active': params.confirmPassword}"
              >
                <div class="mod">
                  <i class="i-star">*</i>
                  <img class="eicon" src="../../assets/img/gs_icon.png" alt />
                  <input
                    type="text"
                    name="psw_confirm"
                    v-model="params.company_name"
                    class="bor-itxt wrong-itxt"
                    placeholder="请输入公司名称"
                  />
                </div>
              </li>
              <li
                class="clli"
                :class="{'form-group--error': $v.params.confirmPassword.$error, 'active': params.confirmPassword}"
              >
                <div class="mod">
                  <i class="i-star">*</i>
                  <img class="eicon" src="../../assets/img/yh_icon.png" alt />
                  <input
                    type="text"
                    name="psw_confirm"
                    v-model="params.name"
                    class="bor-itxt wrong-itxt"
                    placeholder="请输入用户名"
                  />
                </div>
              </li>
              <li
                class="clli"
                :class="{'form-group--error': $v.params.confirmPassword.$error, 'active': params.confirmPassword}"
              >
                <div class="mod">
                  <i class="i-star">*</i>
                  <img class="eicon" src="../../assets/img/dz_icon.png" alt />
                  <select class="dq_select" v-model="params.area_code" @change="getaddresid($event)"  style="margin-left: 47px;width: 200px;border: 0px;height: 30px;">
                    <option value="" selected:disabled style="diaplay:none">请选择地区</option>
                    <option v-for="(item,index) in addressList" :key="item.id"  :value ="item.code">{{item.name}}</option>
                  </select>
                </div>

              </li>
              <li class="clli">
                <div class="m-read">
                  <input name="license" type="checkbox" id="license" ref="license" value="on" />我已阅读并同意&nbsp;
                  <a
                    href="/#/bulletin/?id=6"
                    target="_blank"
                    class="c4448f8"
                  >《会员注册协议》</a>
                </div>
              </li>
              <li class="clli mt20">
                <input
                  type="button"
                  class="log_sbt bg4448f8 wp100 noborder h45 mr10 f16"
                  @click="registerHandle"
                  value="注册"
                />
                <p class="f14 center mt20">
                  已经有账号直接登录：
                  <router-link to="/login" style="color: #4448f8;">跳转到登录页面</router-link>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapMutations } from 'vuex'
import { register, phoneCode, getaddress } from '@/api/user'
import {
  required,
  minLength,
  maxLength,
  sameAs
} from 'vuelidate/lib/validators'
import { regex } from 'vuelidate/lib/validators/common'
const phone = regex('phoneNumber', /^1(3|4|5|7|8)\d{9}$/) // 手机号码校验
export default {
  name: 'Register',
  data () {
    return {
      params: {
        phone: '',
        password: '',
        confirmPassword: '',
        verification_key: '',
        verification_code: '',
        company_name: '',
        name: '',
        area_code: ''
      },
      errors: {
        phone: '',
        confirmPassword: ''
      },
      show: true,
      count: '',
      timer: null,
      addressList: '',
      addresstext: '请选择地址',
      isregister:false
    }
  },
  validations: {
    params: {
      phone: {
        required,
        phone
      },
      verification_code: {
        required
      },
      password: {
        required,
        minLength: minLength(6),
        maxLength: maxLength(32)
      },
      confirmPassword: {
        required,
        sameAsPassword: sameAs('password')
      }
    }
  },
  created () {
    this.address()
  },
  mounted () {
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    setPhone (value) {
      this.params.phone = value
      this.$v.params.phone.$touch()
    },
    setPassword (value) {
      this.params.password = value
      this.$v.params.password.$touch()
    },
    setVerificationCode (value) {
      this.params.verification_code = value
      this.$v.params.verification_code.$touch()
    },
    async registerHandle () {
      if(!this.$refs.license.checked){
        this.$message.error('请先勾选会员注册协议');
        return;
      }
      const res = await register(this.params)
      if (res.id) {
        this.$message.success('注册成功')
        this.$router.push('/login')
      } else if (res.errors) {
        if (res.errors.phone) {
          this.$message.warning(res.errors.phone.join(''))
          this.params.phone = ''
        }
      }
    },
    async getPhoneCode () {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      const res = await phoneCode({ phone: this.params.phone })
      if (res.key) {
        this.params.verification_key = res.key
        this.$message.success('验证码发送成功')
      }
    },
    async address () {
      const res = await getaddress()
      this.addressList = res
      console.log(res)
    },
    getaddresid (event) {
      console.log(event.target.value)
      this.params.area_code = event.target.value
    },
  }
}
</script>

 <style lang="scss" scoped>
.container-regist {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 40px;
  .bd1 {
    width: 1200;
    margin: 0 auto;
    padding: 40px 0;
    // border: 1px solid #e6e6e6;
    // background-color: #ffffff;
    .g-registBox {
      position: relative;
      background: #fff;
      width: 480px;
      padding: 40px;
      a:hover {
        color: #0d9b9d;
      }
      li {
        padding: 0 0 5px;
        font-family: "Microsoft Yahei";
        list-style-type: none;
      }
      li.active .mod {
        border-color: #4448f8;
        .i-user {
          background-position: -24px 0;
        }
        .i-psw {
          background-position: -120px 0;
        }
        .i-vcode {
          background-position: -72px 0;
        }
      }
      .mod {
        position: relative;
        height: 34px;
        border-bottom: 1px solid #d7d7d7;
        margin-bottom: 30px;
        z-index: 1;
        .i-star {
          position: relative;
          z-index: 999;
          color: #f05a5b;
          vertical-align: bottom;
          margin-right: 6px;
          float: left;
        }
        .icon {
          position: absolute;
          left: 14px;
          display: inline-block;
          width: 24px;
          height: 24px;
          vertical-align: middle;
          background: url("../../assets/img/regist-sprite.png") no-repeat 0 0;
          z-index: 999;
        }
        .i-user {
          background-position: 0 0;
        }
        .i-psw {
          background-position: -96px 0;
        }
        .i-vcode {
          background-position: -48px 0;
        }
        .bor-itxt {
          position: absolute;
          width: 100%;
          height: 33px;
          left: 0;
          top: 0;
          border: 0;
          font-size: 14px;
          color: #666;
          padding-left: 58px;
          box-sizing: border-box;
          font-family: "Microsoft Yahei";
        }
      }
      .input-pt {
        position: absolute;
        color: #fff;
        height: 25px;
        font: 12px/23px Tahoma;
        padding: 0 10px;
        margin-top: 8px;
        left: 58px;
        top: 100%;
        .ico {
          display: none;
          position: absolute;
          top: 4px;
          left: 0;
          width: 16px;
          height: 16px;
          background: url("../../assets/img/val.png") no-repeat 0 0;
        }
      }
      .input-pt-w {
        color: #ef5b5b;
        padding-left: 20px;
        .ico {
          display: block;
          background-position: 0 -835px;
        }
      }
      input.btn-getCode {
        position: relative;
        cursor: pointer;
        width: 132px;
        box-sizing: border-box;
        float: right;
        height: 35px;
        line-height: 35px;
        margin: -5px 0 5px 0;
        padding: 0 10px;
        display: inline-block;
        color: #fff;
        background: #4448f8;
        text-align: center;
        border: 0;
        font-size: 14px;
        border-radius: 2px;
        font-family: "Microsoft Yahei";
        z-index: 999;
      }

      input.btn-getCode:disabled,
      input.btn-getCode:disabled:hover {
        background: #ccc;
      }

      input.btn-getCode:hover {
        background: #0d9b9d;
      }
      .m-sltBox {
        border-bottom: 0;
        margin-bottom: 10px;
      }
      .m-read {
        margin-top: 0px;
        text-align: left;
        input {
          margin-right: 4px;
        }
        .c4448f8 {
          color: #4448f8;
        }
      }
      .bg4448f8 {
        background: #4448f8;
        color: #fff;
        width: 480px;
        height: 45px;
        outline: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
      }
      .c4448f8 {
        color: #4448f8;
      }
      .f14 {
        font-size: 14px;
      }
    }
    .mr20 {
      margin-right: 20px;
      margin-top: 45px;
    }
    .mt20 {
      margin-top: 20px;
    }
  }
}
.mb40 {
  margin-bottom: 40px;
}
.mt40 {
  // margin-top: 40px;
}
.clearfix {
  zoom: 1;
  // width: 1200px;
  margin: 0 auto;
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.fl {
  float: left;
  display: inline;
}
.fr {
  float: right;
  display: inline;
}
.input-pt {
  display: none;
}
.form-group--error {
  .input-pt {
    display: block;
  }
}
.f_bj {
  position: absolute;
}
.bd1 {
  border: 0;
}
.article {
  display: none;
}
.dl {
  font-size: 18px;
  color: red;
  border: 1px solid red;
  padding: 5px 15px;
  border-radius: 3px;
}
.login_top:nth-child(2) {
  width: 100%;
  height: 138px;
  background: #fff;
}
.login_body {
  width: 1200px;
  margin: 0 auto;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    margin-left: 25px;
  }
  .kefu {
    float: right;
  }
  div {
    display: flex;
    align-items: center;
  }
  div:nth-child(2) {
    img {
      margin-left: 20px;
    }
  }
}
.eicon {
  position: absolute;
  z-index: 999;
  width: 32px;
}
.dq_select{
  font-family: "Microsoft Yahei";
  font-size: 14px;
}
</style>
